<template>
  <div class="container flex flex-direction flex-sub">
    <el-card class="card flex-sub" style="overflow:auto">
      <div>
        <el-page-header @back="goBack" content="烟感设备详情"> </el-page-header>
      </div>
      <div class="mt-3">
        <el-descriptions title="设备基本信息" direction="vertical" :column="11" border>
          <el-descriptions-item label="设备编码">{{ smokeDeviceDetail.deviceSource }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ smokeDeviceDetail.deviceName }}</el-descriptions-item>
          <el-descriptions-item label="使用情况">
            {{ dictChange(smokeDeviceDetail.status, 'status') }}
          </el-descriptions-item>
          <el-descriptions-item label="设备运行状态">{{ smokeDeviceDetail.deviceRunningState }} </el-descriptions-item>
          <el-descriptions-item label="是否激活">
            {{ dictChange(smokeDeviceDetail.isActive, 'isActive') }}
          </el-descriptions-item>
          <el-descriptions-item label="设备类型">
            {{ dictChange(smokeDeviceDetail.deviceType, 'deviceType') }}
          </el-descriptions-item>
          <el-descriptions-item label="设备型号">{{ smokeDeviceDetail.deviceModel }}</el-descriptions-item>
          <el-descriptions-item label="设备位置">{{ smokeDeviceDetail.deviceLocation }}</el-descriptions-item>
          <el-descriptions-item label="厂家">{{ smokeDeviceDetail.manufactor }}</el-descriptions-item>
          <el-descriptions-item label="所属网格">{{ smokeDeviceDetail.gridMountFullPathText }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ smokeDeviceDetail.createdTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="mt-3">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="预警日历" name="first"></el-tab-pane>
          <el-tab-pane label="数据图表" name="second"></el-tab-pane>
          <el-tab-pane label="数据日志" name="third">
            <data-diary :dataDiaryList="dataDiaryList" :id="id"></data-diary>
          </el-tab-pane>
          <el-tab-pane label="生命周期" name="fourth"></el-tab-pane>
          <el-tab-pane label="变更记录" name="fifth"></el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import dataMonitor from '@/api/data-monitor'
import DataDiary from './component/DataDiary.vue'
import recDataDeviceList from '../device-list'
import dictList from '@/api/dict-list.js'
export default {
  components: { DataDiary },
  name: 'Detail',
  props: {
    id: {
      typeof: Number,
      default: null
    }
  },
  data() {
    return {
      activeName: 'third',
      createdTime: null,
      smokeDeviceDetail: {},
      dataDiaryList: [],
      deviceTypeList: []
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getSmokeDeviceDetail()
    this.getdeviceTypeList()
  },
  methods: {
    getSmokeDeviceDetail() {
      dataMonitor.getSmokeDeviceDetail({ id: this.id }).then(res => {
        if (res.status === 200) {
          this.smokeDeviceDetail = res.data.data
          this.dataDiaryList = res.data.data.equipmentMonitorLogList
          this.dataDiaryDetail = res.data.data.equipmentMonitorLogList.serviceData
        }
      })
    },
    getdeviceTypeList() {
      dictList.getdeviceTypeList().then(res => {
        if (res.status === 200) {
          this.deviceTypeList = res.data.dictValue
        }
      })
    },
    goBack() {
      // this.$router.push({ path: '/smoke' })
      this.$emit('goBack')
    },

    // 数据监测字典转换
    dictChange(value, dictName) {
      const deviceDictList = recDataDeviceList.RecDataSearchArray
      let dict = ''
      let list = []
      if (value != null) {
        // console.log(value, dictName)
        if (dictName == 'deviceType') {
          list = this.deviceTypeList
          dict = list.find(val => {
            return value == val.dictValue
          })
          if (dict) {
            return dict.dictText
          }
        } else if (dictName == 'status') {
          list = deviceDictList.statusList
          dict = list.find(val => {
            return value == val.value
          })
          if (dict) {
            return dict.label
          }
        } else {
          list = deviceDictList.isActiveList
          // console.log(list)
          dict = list.find(val => {
            return value == val.value
          })
          if (dict) {
            return dict.label
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
.flex {
  display: flex;
}
.flex-direction {
  flex-direction: column;
}
.flex-sub {
  flex: 1;
}
.mt-3 {
  margin-top: 30px;
}
.mt-2 {
  margin-top: 20px;
}
</style>
